<script setup>
import { inject, ref, computed } from 'vue'
import testApi from '/src/api/test_api.js'
import globalStore from '/src/components/pinia/store.js'
import { storeToRefs } from 'pinia'
import { useMeta, useActiveMeta } from 'vue-meta'

defineProps({
  msg: String
})


// const count = ref(0)
let store =  globalStore()
const storeRef = storeToRefs(store)
const count = storeRef.count

// console.log("hello-store", store.count, storeRef.count)

</script>

<template>
  <metainfo>
    <template v-slot:title="{ content }">{{ content }} - Yay!</template>
  </metainfo>
  <h1>{{ msg }}</h1>

  <p>
    Recommended IDE setup:
    <a href="https://code.visualstudio.com/" target="_blank">VSCode</a>
    +
    <a href="https://github.com/johnsoncodehk/volar" target="_blank">Volar</a>
  </p>

  <p>
    <a href="https://vitejs.dev/guide/features.html" target="_blank">
      Vite Documentation
    </a>
    |
    <a href="https://v3.vuejs.org/" target="_blank">Vue 3 Documentation</a>
  </p>

  <!-- <button type="button" @click="count++">count is: {{ count }}</button> -->
  <button type="button" @click="handleClick">count is: {{ count }}</button>
  <p>
    Edit
    <code>components/HelloWorld.vue</code> to test hot module replacement.
  </p>
</template>

<style scoped>
a {
  color: #42b983;
}
</style>

<script>
export default {
  metaInfo() {
    console.log(('Title ' + this.store.count))
    return { 
      title: 'Title ' + this.store.count
    }
  },
  data () {
    return {
      meta: null,  
    }
  },
  computed: {
    // No, not reactive
    // metaInfo() {
    //   return {
    //     title: `My Title ${this.store.count}`,
    //     description : `Counted ${this.store.count} times`
    //   }
    // }
  },
  created() {
    // console.log("HelloWorld-created", this.Store, this.StoreRef) 
    // console.log("this.useStore", this.useStore)
    // s2 = this.useStore()
    // console.log("hello-create-s2", s2)
    
    // this.meta = useMeta(() => ({
    //   title: 'Title ' + this.store.count
    // }))

    // Yes
    const computedMeta = computed(() => ({
      title: `My Title ${this.store.count}`,
      description : `Counted ${this.store.count} times`
    }))
    this.meta = useMeta(computedMeta)

    // No! not reactive
    // this.meta = useMeta(this.metaInfo)
  }, 
  methods: {
    handleClick () {
      // this.count++

      this.store.addCounter(1)
      console.log('click.count', this.count, this.store.count, this.storeRef.count.value)
      testApi.test()

    }
  }
}
</script>